<template>
    <div class="minor-table">
        <edu-table
            :pagination="false"
            :data="courseTypeData"
            border
            :order="false"
            :selection="false"
            :row-style="rowStyle"
            :header-cell-style="rowClass"
            :span-method="objectSpanMethod"
        >
            <el-table-column label="课程类别" align="center">
                <template slot-scope="scope">{{scope.row.courseTypeName}}</template>
            </el-table-column>
            <el-table-column label="课程子类别" align="center" show-overflow-tooltip v-if="showCourseSubNature">
                <template slot-scope="scope">{{scope.row.courseName}}</template>
            </el-table-column>
            <el-table-column :label="type == 1 && '课程学分要求' || '微专业课程学分要求'" align="center">
                <template slot-scope="scope">
                    <div>{{scope.row.credit}}</div>
                </template>
            </el-table-column>
            <template v-if="type == 2">
                 <el-table-column label="辅修专业课程学分要求" align="center">
                    <template slot-scope="scope">
                        <div>{{scope.row.credits2}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="辅修学位课程学分要求" align="center">
                    <template slot-scope="scope">
                        <div>{{scope.row.credits3}}</div>
                    </template>
                </el-table-column>
            </template>
            <el-table-column label="百分比" align="center">
                <template slot-scope="scope">{{scope.row.percent}}</template>
            </el-table-column>
        </edu-table>
    </div>
</template>

<script>
import { queryCourseTypeList } from "common/src/api/minor/minorCulturePlanManager";
export default {
    name: "CourseType",
    props: {
        templateId: {
            default: null,
            type: Number
        },
        type: {
            default: 1,
            type: Number
        },
        operationFlag: {
            default: true,
            type: Boolean
        }
    },
    data() {
        return {
            params: "",
            courseTypeData: [],
            showCourseSubNature: false
        };
    },

    methods: {
        getTemplete() {
            let params = {
                id: this.templateId,
                type: this.type //表示 1 模板 2 方案
            };
            queryCourseTypeList(params).then(({ code, data }) => {
                if (code == 200) {
                    let list = [];
                    let cultureRuleList =  data && data.cultureRuleList || [];
                    this.showCourseSubNature = false; //是否显示子性质
                    let par =  cultureRuleList.filter( item =>  !Number(item.parentId));
                    par.forEach(p =>{
                        let children = [];
                        let isFirst = true;
                        cultureRuleList.forEach(e => {
                            if (p.labelId == e.parentId){
                                children.push({
                                    id: e.id,
                                    labelId: e.labelId,
                                    taringingId: e.taringingId,
                                    courseTypeName: p.label,
                                    courseName: e.label,
                                    credit: e.credit,
                                    credits2: e.credit2 || '',
                                    credits3: e.credit3 || '',
                                    percent: "0%",
                                    isFirst
                                });
                                isFirst = false;
                            }
                        });
                        if (!children.length) {
                            list.push({
                                id: p.id,
                                labelId: p.labelId,
                                taringingId: p.taringingId,
                                courseName: '',
                                courseTypeName: p.label,
                                credit: p.credit,
                                credits2: p.credit2 || '',
                                credits3: p.credit3 || '',
                                percent: "0%",
                                isFirst: true,
                                len: 1
                            });
                        }else {
                            this.showCourseSubNature = true;
                            children[0].len = children.length;
                            list = [...list, ...children]
                        }
                    })
                    list.push({
                        courseTypeName: "总计",
                        credits: 0,
                        credits2: 0,
                        credits3: 0,
                        percent: "0%",
                        isTotal: true
                    });
                    this.courseTypeData = [...list];
                    this.autoCalculate();
                    // let total = 0;
                    // data.cultureRuleList.forEach(el => {
                    //     total += parseFloat(el.credit);
                    // });
                    // this.courseTypeData = data.cultureRuleList.map(el => {
                    //     return {
                    //         courseTypeName: el.label,
                    //         credits: el.credit,
                    //         percent:
                    //             ((el.credit * 100) / total).toFixed(2) + "%"
                    //     };
                    // });
                    // this.courseTypeData.push({
                    //     courseTypeName: "总计",
                    //     credits: total,
                    //     percent: "100%"
                    // });
                }
            });
        },
        autoCalculate() {
            let totalCredit = 0, totalCredit2 = 0, totalCredit3 = 0;
            //计算课程类别
            (this.courseTypeData || []).forEach(e => {
                if (!e.isTotal) {
                    totalCredit += Number(e.credit);
                    totalCredit2 += Number(e.credits2);
                    totalCredit3 += Number(e.credits3);
                }
            });
            //计算百分比
            (this.courseTypeData || []).forEach(e => {
                if (e.isTotal) {
                    e.credit = totalCredit;
                    e.credits2 = totalCredit2;
                    e.credits3 = totalCredit3;
                }
                e.percent = this.calculatePercent(
                    Number(e.credit) + Number(e.credits2) + Number(e.credits3),
                    totalCredit + totalCredit2 + totalCredit3
                );
            });
        },
        calculatePercent(num, total) {
            //计算百分比
            num = parseFloat(num);
            total = parseFloat(total);
            if (isNaN(num) || isNaN(total)) {
                return "-";
            }
            return total <= 0
                ? "0%"
                : Math.round((num / total) * 10000) / 100.0 + "%";
        },
        objectSpanMethod({ row, columnIndex }) {
            if (columnIndex === 0 && !row.isTotal) {
                if (row.isFirst) {
                    return {
                        rowspan: row.len,
                        colspan: 1
                    };
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                }
            }
        }
    },
    mounted() {
        this.getTemplete();
    }
};
</script>

<style lang="scss" scoped>
.minor-table {
    font-size: 14px;
    .minor-table-credit {
        font-family: PingFangSC-Medium;
        color: #2b3b4e;
        letter-spacing: 0;
        line-height: 16px;
        margin-left: 48px;
    }
    .show-row-1 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
</style>
